<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>支付详情</title>
    <link rel="stylesheet" href="./css/aui.css">
    <link rel="stylesheet" type="text/css" href="./css/aui-flex.css" />
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./html/order_detail/css/pay_succeed.css">
    <script type="text/javascript" src="./js/base.js"></script>
</head>
<body id="payBody">
<section id="app" v-cloak>
    <div>
        <img src="./icon/1-3/failTit.png" alt="">
    </div>
    <div class="successBg">     <!--支付失败-->
        <div style="position: relative">
            <!--<img src="./icon/2-2/success.png" alt="">-->
            支付失败
        </div>
        <div>￥<?=$order["goods_amount"];?></div>
        <div class="aui-flex-col aui-flex-item-12 telBtn">
            <div class="aui-flex-item-3 aui-flex-offset-2" @click="goPayorder('all')">
                查看订单
            </div>
            <div class="aui-flex-item-3 aui-flex-offset-2"  @click="goIndexWX()">
                返回首页
            </div>
        </div>
        <div style="clear: both"></div>
        <!--<div class="activity_img" id="coverPic">-->
        <!--<img src="./icon/2-2/pay_activity.png" alt="">-->
        <!--</div>-->
        <!--<div id ="shareDiv" style="z-index: 999999;" class="shareDiv"><img src="./images/fenxiang.png"></div>-->
        <div class="alert">
            <div>
                <img src="./icon/2-2/lingdang.png" alt="">
                <div style="margin-left: 1rem">安全提醒</div>
            </div>
            <div class="aui-font-size-12">
                小普不会通过任何非官方电话、QQ微信与您联系，也不会要求您点击链接进行退款或取消订单
            </div>
        </div>
    </div>

    <div>
        <div class="aui-flex-item-12 shop_tit">
            <div class=" "></div>
            <div  class="">您可能还想买</div>
            <div  class=""></div>
        </div>

        <div class=""   v-for="goodsInfo,idx in showGoodsList" style="background: #fff;">
            <div class="aui-flex-item-6" v-if="idx==1" style="position: relative;border-right:1px solid #eee"  v-on:click="goDetail(goodsInfo.goods_id)">
                <img src="./icon/huLiYe.png">
                <div class="aui-padded-l-10 aui-padded-t-10">
                    <div class="">娇妍护理液</div>
                    <div class="textCol aui-font-size-12" style="width:96%;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">草本精华 雾化护理</div>
                    <div class="  textColor" ><span class="aui-font-size-12" style="position:relative;top:-0.2rem">￥</span><span class="aui-font-size-18">{{goodsInfo.shop_price}} </span> <span class="aui-font-size-12 textCol" style="text-decoration:line-through;">￥{{goodsInfo.market_price}}</span>    </div>
                    <span class="textCol aui-font-size-14"></span>
                </div>
            </div>
            <div class="aui-flex-item-6 " v-if="idx==2" style="position: relative;border-right:1px solid #eee"  v-on:click="goDetail(goodsInfo.goods_id)">
                <img src="./icon/shouBiao.png">
                <div class="aui-padded-l-10  aui-padded-t-10">
                    <div>小普智能手环</div>
                    <div class="textCol aui-font-size-12" style="width:96%;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">创新六大功能，守护你的健康</div>
                    <div class="  textColor" ><span class="aui-font-size-12" style="position:relative;top:-0.2rem">￥</span><span class="aui-font-size-18">{{goodsInfo.shop_price}} </span> <span class="aui-font-size-12 textCol" style="text-decoration:line-through;">￥{{goodsInfo.market_price}}</span>    </div>
                    <span class="textCol aui-font-size-14"></span>
                </div>
            </div>
        </div>
    </div>
    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:8rem;margin-left: -3rem">
            <img src="./icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center">暂无网络</div>
        </div>

        <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:15rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>
</section>
<script type="text/javascript" src="./js/zepto.min.js"></script>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript" src="./html/order_detail/js/pay_fail.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    wx.config({
        debug: false,
        appId: '<?=$signPackage["appId"];?>',
        timestamp: <?= $signPackage["timestamp"];?>,
        nonceStr: '<?=$signPackage["nonceStr"];?>',
        signature: '<?=$signPackage["signature"];?>',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'checkJsApi',
            'openLocation',
            'getLocation',
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });
    wx.ready(function () {
        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline({
            title: '零元购买小普马桶', // 分享标题
//                    link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5dee5a1c01f37b68&redirect_uri=http%3A%2F%2Fwww.pooai.cn%2Fwx%2Ffrontend%2Fweb%2Findex.php%3Fr%3Dsite%252Fsite%252Fdetail%26qcode%3Dcbfe7330-e0a6-11e7-85e3-a3ad0180d146&response_type=code&scope=snsapi_userinfo&state=authorize#wechat_redirect', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            link:"<?=Yii::$app->params['domurl']?>/wx/frontend/web/index.php?r=marketing/sharereb/goindex",
            imgUrl: '<?=Yii::$app->params['domurl']?>/wx/frontend/web/upload/fenxiang.png',
            trigger: function (res) {
                alert('用户点击分享到朋友圈');
            },
            success: function (res) {
                alert('已分享了');
            },
            cancel: function (res) {
                alert('已取消');
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
        wx.onMenuShareAppMessage({
            title: '零元购买小普马桶', // 分享标题
//                link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5dee5a1c01f37b68&redirect_uri=http%3A%2F%2Fwww.pooai.cn%2Fwx%2Ffrontend%2Fweb%2Findex.php%3Fr%3Dsite%252Fsite%252Fdetail%26qcode%3Dcbfe7330-e0a6-11e7-85e3-a3ad0180d146&response_type=code&scope=snsapi_userinfo&state=authorize#wechat_redirect', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            link:"<?=Yii::$app->params['domurl']?>/wx/frontend/web/index.php?r=marketing/sharereb/goindex",
            desc: '成功购买小普智能马桶，分享二维码给好友，通过您的二维码购买的好友，将助你获得商品10%返利。', // 分享描述
            imgUrl: '<?=Yii::$app->params['domurl']?>/wx/frontend/web/upload/fenxiang.png',
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {

            },
            cancel: function () {

            }
        });
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log("errorMSG:"+res);
        });
//            wx.checkJsApi({
//                jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
//                success: function(res) {
//                    // 以键值对的形式返回，可用的api值true，不可用为false
//                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//                    alert(res)
//                }
//            });


    });
    function goPayorder(){
        window.location.href="https://www.pooai.cn/wxpay/example/jsapi.php?ordersn=<?=$ordersn?>&tolfee=<?=$goods_amount?>";
    }
    function goIndexWX(){
        window.location.href = "./index.html";
    }
</script>
</body>
</html>